<template>
  <div class="machine">
    <div class="machine-left"><MachineLeft :selectVal="selectVal"></MachineLeft></div>
    <div class="machine-right">
      <div style="position: relative" class="machine-number">
        <div class="text">选择产线:</div>
        <a-dropdown trigger="hover" @select="handleSelect" popup-container="body">
          <div class="number-select">{{ visibleName }}</div>
          <template #content>
            <a-doption style="width: 120px; zoom: 2" :command="'全部'">全部</a-doption>
            <a-doption v-for="item in pro_name" style="width: 120px; zoom: 2" :command="item">{{ item }}</a-doption>
          </template>
        </a-dropdown>
      </div>
      <div class="machine-number">
        <div class="text">产线调度:</div>
        <template v-for="item in product" :key="item.product_id">
          <template v-if="selectVal != '全部'">
            <template v-if="setting.sm.machineSelect != '组'">
              <div v-if="selectVal == item.product_name" :class="item.status == 1 ? 'btn-open-active' : 'btn-open'" @click="handlerOpenClick(item)">启用</div>
              <div v-if="selectVal == item.product_name" :class="item.status == 0 ? 'btn-prohibit-active' : 'btn-prohibit'" @click="handlerBanClick(item)">禁用</div>
            </template>
            <template v-if="setting.sm.machineSelect == '组'">
              <div v-if="getProductSwitch(item)" :class="item.status == 1 ? 'btn-open-active' : 'btn-open'" @click="handlerOpenClick(item)">启用</div>
              <div v-if="getProductSwitch(item)" :class="item.status == 0 ? 'btn-prohibit-active' : 'btn-prohibit'" @click="handlerBanClick(item)">禁用</div>
            </template>
          </template>
        </template>
        <template v-if="selectVal == '全部'">
          <template v-for="item in product" :key="item.product_id">
            <div class="item" style="overflow: auto">
              <a-descriptions :column="1" :align="{ value: 'right' }">
                <a-descriptions-item :label="item.product_name + ':'">
                  <a-tag bordered @click="switchProduct(item)" size="large" :color="item.status == 0 ? 'red' : 'arcoblue'" style="font-size: 24px">{{
                    item.status == 1 ? '启用' : '禁用'
                  }}</a-tag>
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </template>
          <div :class="AllProduct == '启用' ? 'btn-open-active' : 'btn-open'" @click="handlerOpenMessage">全线启用</div>
          <div :class="AllProduct == '禁用' ? 'btn-prohibit-active' : 'btn-prohibit'" @click="handlerBanMessage">全线禁用</div>
        </template>
      </div>
      <div class="machine-number" v-if="setting.sm.machineControl">
        <div class="text">机台控制:</div>
        <div :class="AllMachine == '启用' ? 'btn-open-active' : 'btn-open'" @click="handlerOpenMachine">启用</div>
        <div :class="AllMachine == '禁用' ? 'btn-prohibit-active' : 'btn-prohibit'" @click="handlerBanMachine">禁用</div>
      </div>
      <template v-if="setting.smBandType == '绑定点' ? true : false">
        <div class="machine-number" v-if="setting.sm.machineEmpty">
          <div class="text">满桶清空:</div>
          <div class="btn-open-active" @click="handlerEmptyClick">满桶清空</div>
        </div>
      </template>
      <template v-if="setting.smBandType == '绑定点' ? true : false">
        <div class="machine-number" v-if="setting.sm.machineFull">
          <div class="text">一键满桶:</div>
          <div class="btn-open-active" @click="handleFullClick">一键满桶</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import MachineLeft from './components/machine-left.vue'
import { storeToRefs } from 'pinia'
import { Message } from '@arco-design/web-vue'
import useMainStore from '../../store/main/main'
import { postSmEmpty, postSmFull, postSmAllEdit } from '../../service/api'
import useSetStore from '../../store/setting/setting.js'
const setStore = useSetStore()
const { setting } = storeToRefs(setStore)
const mainStore = useMainStore()

const { product, sm, productName, group } = storeToRefs(mainStore)
const selectVal = computed(() => {
  return productName.value
})
const visibleName = computed(() => {
  let name
  if (setting.value.sm.machineSelect == '产线') {
    name = productName.value
  } else if (setting.value.sm.machineSelect == '机台') {
    if (productName.value === '全部') {
      name = productName.value
    } else {
      sm.value.forEach((item) => {
        if (item.product_name == productName.value) {
          name = item.machine_name
        }
      })
    }
  } else {
    if (productName.value === '全部') {
      name = productName.value
      // console.log();
    } else {
      group.value.forEach((item) => {
        if (item.group_name == productName.value) {
          name = item.group_name
        }
      })
    }
  }
  return name
})
function handleSelect(command) {
  if (setting.value.sm.machineSelect === '产线') {
    mainStore.changeProduct(command)
  } else if (command == '全部') {
    mainStore.changeProduct(command)
  } else if (setting.value.sm.machineSelect === '组') {
    group.value.forEach((item) => {
      if (item.group_name == command) {
        mainStore.changeProduct(item.group_name)
      }
    })
  } else {
    sm.value.forEach((item) => {
      if (item.machine_name == command) {
        mainStore.changeProduct(item.product_name)
      }
    })
  }
  // selectVal.value = command
}
const pro_name = computed(() => {
  let pro = ''
  if (setting.value.sm.machineSelect === '产线') {
    const newArr = product.value.filter((item) => {
      return item.product_name
    })
    pro = newArr.map((item) => {
      return item.product_name
    })
  } else if (setting.value.sm.machineSelect === '机台') {
    pro = sm.value.map((item) => {
      return item.machine_name
    })
  } else {
    pro = group.value.map((item) => {
      return item.group_name
    })
  }
  return pro
})
const switchProduct = (item) => {
  if (item.status === 1) {
    handlerBanClick(item).then(() => {
      Message.warning(`${item.product_name}线已禁用`)
    })
  } else {
    handlerOpenClick(item).then(() => {
      Message.success(`${item.product_name}线已启用`)
    })
  }
}
const handlerOpenClick = async (item) => {
  // if(productName.value=='')
  await mainStore.getProductEdit({ product_name: item.product_name, status: 1 })
}
const handlerBanClick = async (item) => {
  await mainStore.getProductEdit({ product_name: item.product_name, status: 0 })
}

const handlerEmptyClick = async () => {
  const res = await postSmEmpty({ product: productName.value })
  if (res.code == 202) {
    Message.success('盘库成功')
    mainStore.getSmList()
  }
}
const handleFullClick = async () => {
  const res = await postSmFull({ product: productName.value })
  if (res.code == 202) {
    Message.success('盘库成功')
    mainStore.getSmList()
  }
}
const AllProduct = computed(() => {
  const proOpenStatus = mainStore.product.filter((item) => item.status == 1)
  const proBanStatus = mainStore.product.filter((item) => item.status == 0)
  if (proOpenStatus.length === mainStore.product.length) {
    return '启用'
  }
  if (proOpenStatus.length != mainStore.product.length && proBanStatus.length != mainStore.product.length) {
    return ''
  }
  if (proBanStatus.length === mainStore.product.length) {
    return '禁用'
  }
})
const getNewMachine = (machine) => {
  if (productName.value == '全部') {
    return true
  }
  if (setting.value.sm.machineSelect == '组') {
    for (let item of group.value) {
      // 检查 group_name 是否匹配
      if (item.group_name === productName.value) {
        // 遍历 group_member
        for (let subitem of item.group_member) {
          // 检查 machine_name 是否匹配
          if (machine.machine_name === subitem) {
            return true // 如果找到匹配项，立即返回 true
          }
        }
      }
    }
    return false // 如果没有找到匹配项，返回 false
  } else {
    return productName.value == machine.product_name
  }
}
const newMchinae = ref([])
const AllMachine = computed(() => {
  newMchinae.value = mainStore.sm.filter((item) => getNewMachine(item))
  const proOpenStatus = newMchinae.value.filter((item) => item.status == 1)
  const proBanStatus = newMchinae.value.filter((item) => item.status == 0)
  if (proOpenStatus.length === newMchinae.value.length) {
    return '启用'
  }
  if (proOpenStatus.length != newMchinae.value.length && proBanStatus.length != newMchinae.value.length) {
    return ''
  }
  if (proBanStatus.length === newMchinae.value.length) {
    return '禁用'
  }
})
const handlerOpenMessage = () => {
  mainStore.getProductEdit({ product_name: '全部', status: 1 }).then((res) => {
    Message.success('全部产线开启')
    AllProduct.value = '启用'
  })
}
const handlerBanMessage = () => {
  mainStore.getProductEdit({ product_name: '全部', status: 0 }).then((res) => {
    Message.success('全部产线禁用')
    AllProduct.value = '禁用'
  })
}

const handlerOpenMachine = () => {
  postSmAllEdit({ machine: newMchinae.value, status: 1 }).then((res) => {
    Message.success('全部机台启用')
    mainStore.getSmList()
  })
}
const handlerBanMachine = () => {
  postSmAllEdit({ machine: newMchinae.value, status: 0 }).then((res) => {
    Message.success('全部机台禁用')
    mainStore.getSmList()
  })
}

const getProductSwitch = (pro) => {
  // 遍历 group.value
  for (let item of group.value) {
    // 检查 group_name 是否匹配
    if (item.group_name === selectVal.value) {
      // 遍历 group_member
      for (let subitem of item.group_member) {
        // 遍历 sm.value
        for (let subToItem of sm.value) {
          // 检查 machine_name 和 product_name 是否匹配
          if (subitem === subToItem.machine_name && subToItem.product_name === pro.product_name) {
            console.log(pro.product_name)
            return true // 如果找到匹配项，立即返回 true
          }
        }
      }
    }
  }
  return false // 如果没有找到匹配项，返回 false
}
</script>

<style lang="less" scoped>
:deep(.arco-descriptions-item-label-block) {
  font-size: 24px;
  padding: 0 20px;
}
.machine {
  width: 100%;
  display: flex;
  position: relative;
  flex-wrap: wrap;
  align-content: flex-start;
  .machine-left {
    float: left;
    width: 87%;
    height: 100%;
  }
  .machine-right {
    position: fixed;
    display: flex;
    height: calc(100% - 80px);
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    right: 20px;
    top: 80px;
    overflow: scroll;
    .machine-number {
      margin-top: 20px;

      .number-select {
        width: 200px;
        height: 80px;
        font-size: 32px;
        margin: 10px 20px;
        background-color: #157ae3;
        color: #fff;
        text-align: center;
        line-height: 80px;
        border-radius: 6px;
        cursor: pointer;
      }
      .btn-open {
        width: 200px;
        box-sizing: border-box;
        height: 80px;
        font-size: 32px;
        margin: 10px 20px;
        color: #157ae3;
        background-color: #fff;
        text-align: center;
        line-height: 80px;
        border-radius: 6px;
        border: 2px solid #157ae3;
        cursor: pointer;
      }

      .btn-prohibit-active {
        width: 200px;
        height: 80px;
        font-size: 32px;
        margin: 10px 20px;
        background-color: red;
        color: #fff;
        text-align: center;
        line-height: 80px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
      }
      .btn-open-active {
        width: 200px;
        height: 80px;
        font-size: 32px;
        margin: 10px 20px;
        background-color: #157ae3;
        color: #fff;
        text-align: center;
        line-height: 80px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
      }
      .btn-open-active:active {
        background-color: #205185;
      }
      .btn-prohibit {
        width: 200px;
        height: 80px;
        font-size: 32px;
        margin: 10px 20px;
        background-color: #ccc;
        color: #fff;
        text-align: center;
        line-height: 80px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
      }
      .btn-prohibit:active {
        background-color: #b2b2b2;
      }
    }
  }
  .text {
    font-size: 26px;
    font-weight: 500;
  }
  .text1 {
    font-size: 20px;
    font-weight: 500;
  }
}
</style>
